<template>
	<view>
		<view class="" style="display: flex;justify-content: space-between;padding: 140rpx 20rpx 20rpx 20rpx;z-index: 10000;">
		<view >
			<!-- <image :src="getImgUrl('/img/missimg/xiangzuojiantou.svg')" style="width: 56rpx;height: 30rpx;position: relative;z-index: 10000;" @click="Blackto"></image> -->
		<uni-icons custom-prefix="back" type="back" size="30" color="#FFFFFF" style="position: relative;z-index: 10000;" @click="Blackto"></uni-icons>
		</view>
		<view class="missrivertop">
		<view class="top_right"  @click="Reput">我的思念灯</view>
		</view>
		</view>
		<view class="centerview">
			<image class="centerimg" :src="sinianimg" mode=""></image>
		</view>
		<view class="barrage">
			<lff-barrage ref="lffBarrage" :newlistData='listData'></lff-barrage>
			<view class="footer">
				<view class="btn" @click="misspass3">
					再放一个
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {imgBaseUrl} from '../../../../utils/baseUrl.js'
	import lffBarrage from '@/components/lff-barrage/lff-barrage.vue'
	import { busTreviRivershow } from '../../../../utils/api.js'
	export default {
		components: {
			lffBarrage
		},
		data() {
			return {
				sinianimg: imgBaseUrl + '/img/missimg/sinianhe.png',
				listData:[],
			};
		},
		
	async mounted() {
			const data = await busTreviRivershow()
			this.listData = data.result
			setTimeout(()=>{
				this.colrdo()
			},500)
		},		
		methods: {
			colrdo() { //插入一条弹幕
				this.$refs.lffBarrage.newadd()
			},
			Reput() {
				this.$emit('reput')
			},
			misspass3() {
				this.$emit('misspass3') 
			},
			Blackto(){
				console.log(this,'this')
				this.$emit('blackto')
			},
			// 图片渲染
			getImgUrl(image){
				return imgBaseUrl+image;
			},
		}
	}
</script>

<style lang="less" scoped>
	.missrivertop {
		.top_right {
			// padding: 40rpx 30rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: 200;
			text-align: right;
			position: relative;
			z-index: 10000;
		}
	}

	.centerview {
		text-align: center;
		height: 40vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.centerimg {
		// margin-top: -260rpx;
		width: 240rpx;
		height: 80rpx;
		// margin: auto;
	}

	.barrage {
		width: 100%;
		height: 600rpx;
		// border: 1px solid red;
		
		position: relative;
	}

	.footer {
		position: absolute;
		bottom: 140rpx;
		left: 25%;
		z-index: 10000;

		.btn {
			text-align: center;
			width: 356rpx;
			height: 100rpx;
			color: #60371A;
			font-family: PingFang SC-Bold, PingFang SC;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 100rpx;
			background: linear-gradient(180deg, #FEF1DF 0%, #FBE5C4 100%);
			border-radius: 52rpx 52rpx 52rpx 52rpx;
			opacity: 1;
		}
	}
</style>